<template>
  <section class="group" v-loading="loading">
    <el-row class="group_table">
      <el-row class="group_title">
        <el-col :span="6">
          <span>{{cacheGroup.group_name}}</span>
          <i class="iconfont ali-bianji" @click="openGroup(1)"></i>
        </el-col>
        <el-col :span="18">
          <el-button type="danger" size="mini" class="btn" @click="batchDel" plain>批量删除</el-button>
          <el-button type="primary" size="mini" class="btn" @click="openMember" plain>添加成员</el-button>
          <el-button type="primary" size="mini" class="btn" @click="openGroup(0)" plain>添加小组</el-button>
        </el-col>
      </el-row>
      <el-table :data="groupUserList" stripe style="width: 100%" @selection-change="handleSelectionChange" >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="user_name" label="姓名"></el-table-column>
        <el-table-column prop="job" label="职位"></el-table-column>
        <el-table-column prop="work_num" label="工号"></el-table-column>
        <el-table-column prop="phone" label="手机"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <!-- <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click.native.prevent="openPerson(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </el-row>
    <!-- 添加小组模态框 -->
    <section>
      <el-dialog :title="addGroupForm.title" :visible.sync="isShow.group" width="600px">
        <el-form :model="addGroupForm" style="padding:0 40px;" ref="addGroupForm">
          <el-form-item label="小组名称" :label-width="formLabelWidth" prop="group_name" :rules="filter_rules({required:true})">
            <el-input v-model="addGroupForm.group_name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="isShow.group = false">取 消</el-button>
          <el-button type="danger" @click="delGroup" v-show="isShow.delBtn">删 除</el-button>
          <el-button type="primary" @click="validate('addGroupForm')">确 定</el-button>
        </span>
      </el-dialog>
    </section>
    <!-- 穿梭框 -->
    <section>
      <member-view ref="childInit" @saveUsers="saveUsers" @closeTransfer="isShow.transfer = false" :isShow="isShow.transfer"></member-view>
    </section>
  </section>
</template>
<script>
import member_transfer from './components/add_member_transfer'
import { groupUser_saves, groupUser_deleteAll, group_save, group_edit, group_delete } from '@/api/group'
import { mapGetters } from 'vuex'

export default {
  components:{ 'member-view': member_transfer },
  name: "group",
  data() {
    return {
      isShow: { transfer: false, group: false, delBtn: false },
      formLabelWidth: '100px',
      multipleSelection: [],
      addGroupForm: {},//添加小组
      loading: false 
    };
  },
  computed:{
    ...mapGetters([
      'groupUserList',
      'cacheGroup'
    ])
  },
  methods: {
    async delGroup(){//删除当前小组
      try {
        let res = await this.$confirm('确认删除吗？');
        if(res == 'confirm'){
          this.loading = true ;
          this.isShow.group = false;
          let { data } = await group_delete({id: this.cacheGroup.id})
          if(data.data.status == 100){
            this.$message.success('删除成功')
          }
          let result = await this.$store.dispatch('SetGroupList');
          await this.$store.dispatch('FindUsersByGroupId', result[0]);
          this.loading = false ;
        }
      } catch (error) {
        console.log(error,'error')
      }
    },
    openGroup(e){//打开添加小组面板
      if(e == 0){//添加
        this.addGroupForm = {}
        this.addGroupForm.title = '添加小组'
        this.isShow.delBtn = false;
      }else{
        this.addGroupForm = this.cacheGroup;
        this.addGroupForm.title = '编辑小组'
        this.isShow.delBtn = true;
      }
      this.isShow.group = true ;
    },
    async editGroup(){//编辑小组
      this.loading = true;
      let params = {
        id: this.cacheGroup.id,
        company_id: localStorage.getItem("companyId"),
        group_name: this.addGroupForm.group_name
      }
      try {
        let { data } = await group_edit(params);
        if(data.status == 100){
          this.$message.success('编辑成功');
        }
        await this.$store.dispatch('SetGroupList');//热加载菜单
      } catch (err) {
        console.log(err,'err')
      }
      this.loading = false;
    },
    async addGroup(){//添加小组
      this.loading = true;
      let params = {
        company_id: localStorage.getItem("companyId"),
        group_name: this.addGroupForm.group_name
      }
      try {
        let { data } = await group_save(params);
        if(data.status == 100){
          this.$message.success('添加成功');
        }
        await this.$store.dispatch('SetGroupList');//热加载菜单
      } catch (err) {
        console.log(err,'err')
      }
      this.loading = false;
    },
    validate(e){
      this.$refs[e].validate((valid) => {
        if (valid) {
          this.isShow.group = false
          if(this.isShow.delBtn){//编辑小组
            this.editGroup();  
          }else{//添加小组
            this.addGroup();
          }
        }else{
          return false;
        }
      });
    },
    handleSelectionChange(e){//
       this.multipleSelection = e;
    },
    openMember(){//打开添加成员模态框
      this.isShow.transfer = true;
      this.$refs.childInit.openTransfer();
    },
    async batchDel(){//批量删除
      if(this.multipleSelection.length == 0){
        this.$message.warning('至少选择一位成员')
        return ;
      }
      try {
        let res = await this.$confirm('确认删除吗？');
        if(res == 'confirm'){
          this.loading = true ;
          let ids = '';
          for (var i = 0; i < this.multipleSelection.length; i++) {
            var element = this.multipleSelection[i];
            ids += element.id + ','
          }
          let { data } = await groupUser_deleteAll({array: ids });
          if(data.status == 100){
            await this.$store.dispatch('FindUsersByGroupId',this.cacheGroup)//热加载用户
            await this.$store.dispatch('SetGroupList');//热加载菜单
            this.$message.success('删除成功')
          }
          this.loading = false ;
        }
      } catch (error) {
        console.log(error,'error')
      }
    },
    async saveUsers(users){//保存小组用户
      let ids = ''
      for (var i = 0; i < users.length; i++) {
        var element = users[i];
        let id = element.id.substring(7,element.id.length);
        ids += id + ','
      }
      this.isShow.transfer = false
      this.loading = true;
      let params = {
        company_id: localStorage.getItem('companyId'),
        user_ids: ids,
        group_id: this.cacheGroup.id
      }
      let { data } = await groupUser_saves(params);
      if(data.status == 100){
        await this.$store.dispatch('FindUsersByGroupId',this.cacheGroup)//热加载用户
        await this.$store.dispatch('SetGroupList');//热加载菜单
        this.$message.success('添加成功')
      }
      this.loading = false;
    }
    
  },
  created: function() {
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.group_table{
  padding: 25px 20px;
  .group_title{
    padding: 10px 15px;
    background-color: #f4f6f8;
    span {
      font-size: 18px;
      font-weight: bold;
    }
    .btn{
      float: right;
      margin-right: 10px;
    }
  }
  .ali-bianji {
    color: orange;
    font-size: 23px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>